<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            var ul=document.getElementById("ul");
            var allA=document.getElementsByTagName("a");
            for (var i=0;i<allA.length;i++){
                allA[i].onclick=function () {
                    alert("我是a的点击函数");
                }
            }
            var btn01=document.getElementById("btn01");
            btn01.onclick=function () {
                var li=document.createElement("li");
                li.innerHTML="<a href='javascript:;'>新建超链接</a>"
                ul.appendChild(li);
            };

            ul.onclick=function (event) {
                //如果触发事件的对象是我们期望的元素，则执行否则不执行
               event=event||window.event;
               if (event.target.className=="link"){
                    alert(event.target);
               }

            }
        }
    </script>
</head>
<body>
<script>
    /*事件委派是指将事件统一绑定给元素的共同祖先，这样当后代元素上的事件触发时，会冒泡到祖先元素
     *           从而通过祖先元素的响应函数来处理事件
     *          事件的委派利用了冒泡。可以减少事件的绑定次数，提高程序的性能
    *event.target 触发事件的对象
    *
    * */
</script>
<button id="btn01">添加超链接</button>
<ul id="ul">
    <li><a href="javascript:;" class="link">超链接1</a></li>
    <li><a href="javascript:;" class="link">超链接2</a></li>
    <li><a href="javascript:;" class="link">超链接3</a></li>
</ul>
</body>
</html>